import logo from './logo.svg';
import './App.scss';
import Input from './component/Input'
import Tabber from './component/Tabber'
import { category_list,category_subcate } from './utils/api'
// import Child from './component/Child';


import React, { Component } from 'react';

class App extends Component {
  //挂载期（挂载期的方法会自动执行，而且只执行一次）
  constructor(props){
    super(props);
    this.state = {
      currentIndex:0,
      leftList:[],
      // newBillboards:[],
      newSubcategory:[]
    }//初始化组件状态
    this.handleClick.bind(this)
  }
  handleClick(index){
    category_subcate({id:this.state.leftList[index].id}).then((res)=>{
      console.log(res.data);

      this.setState({
        
        currentIndex:index,
        newSubcategory:res.data.subcate.subcategory
      })
      
      console.log(res.data.subcate.subcategory);
    })
  }
  // componentWillMount(){
  //   console.log('componentWillMount 将要挂载');
  // }
  componentDidMount(){
    console.log('componentDidMount 挂载完成');
    category_list().then((res)=>{
      console.log(res.data);
      this.setState({
        leftList : res.data.list,
        
      })
    })
    //在这里发送网络请求，创建定时器，事件监听
    category_subcate({id:225510}).then((res)=>{
           console.log(res.data);
           this.setState({
            newSubcategory:res.data.subcate.subcategory
          })
    })
  }
  //更新期
  shouldComponentUpdate(nextProps,nextState){
    if(JSON.stringify(this.state) == JSON.stringify(nextState)){
      return false
    }else{
      return true
    }
  }
  // componentWillUpdate(){
  //   console.log('componentWillUpdate 将要更新');
  // }
  // componentDidUpdate(){
  //   console.log('componentDidUpdate 更新完成');
  // }
  // //卸载期
  // componentWillUnmount(){
  //   console.log('componentWillUnmount 即将卸载');
  // }
  render() {
    console.log('render');
    return (
      // 分类页面
    <>
    {/* 输入框组件 */}
    <Input></Input>
    <div className='app'>
      {/* 左边一级列表渲染 */}
     <div className="left">
      {
        this.state.leftList.map((item,index)=>{
          return(
            <div key={index} className={`btn ${this.state.currentIndex == index?'active':''}`}  onClick={
              ()=>{
                this.handleClick(index)
              }
            }>{item.name}</div>
          )
        })
      }
     </div>
     {/* 右边商品列表渲染包括二级三级菜单 */}
     <div className="right">
      {
        this.state.newSubcategory.map((item,index)=>{
          return(
            <div className='item' key={index}>
              <p className='p1'>{item.name}</p>
              {
                this.state.newSubcategory[index].subNavs.map((item,index)=>{
                  return(
                    <div className="img" key={index}>
                    <img src={item.pic} alt="" />
                    <p>{item.name}</p>
                  </div>
                  )
                })

                }
            </div>
          )
        })
      }
     </div>
    </div>
    {/* 底部列表组件 */}
    <Tabber></Tabber>
    </>
    );
  }

}

export default App;